<template>
  <div class="bus-station-map">
    <div class="map-container-box" id="map-container"></div>
    <!-- <div class="all-checkbox-list">
      <nanning-screen-checkbox @on-change-checkbox="onChangeCheckbox" @on-change-visible="onChangeVisible" v-model="checkedLabel" :visibleCheckboxList="visibleCheckboxList"></nanning-screen-checkbox>
    </div> -->
    <station-pop class="bus-station-dialog" :stationPopData="stationPopData"></station-pop>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import stationPop from '../../components/stationPop/index.vue'
// @ts-ignore
import BusStation from '../../../basic/BusStation.js'
import EventBus from '../../../../../utils/eventBus'
import { getStationDetail } from '../../../../../api/situationAwareness/busStation/busStation'
@Component({
  name: 'bus-station-map',
  components: {
    stationPop
  }
})
export default class BusStationMap extends Vue {
  private checkedLabel = [1, 2, 3] // 默认选中的值

  private visibleCheckboxList = false

  private stationPopData = {}

  private stationList: any = []

  private map: any

  private onChangeCheckbox(value: any) {
    console.log('多选框选中的值', value)
  }

  private onChangeVisible(value: any) {
    this.visibleCheckboxList = value
  }

  mounted () {
    this.map = new BusStation(this)
    this.map.initBusStation()
    // @ts-ignore
    EventBus.$on('stationList', (list) => {
      this.stationList = []
      console.log('recv: ', list)
      this.stationList = list
      this.map.initBusStation()
    })
    EventBus.$on('chooseStation', (e: any) => {
      this.map.setActiveMarker(e)
    })
    EventBus.$on('resetMarker', () => {
      this.map.resetMarker()
    })
  }
  beforeDestroy () {
    console.log('移除 EventBus')
    EventBus.$off()
  }

  getStationList () {
    return this.stationList
  }
  // 获取站点详情
  async setStationData (id: any) {
    this.stationPopData = {
      stationName: '加载中...',
      routeName: '加载中...',
      passengerflow: '加载中...',
      arriveBusList: ['加载中...'],
      arrivedBusList: ['加载中...'],
      deviceId: ['加载中...']
    }
    const params = {
      dzcode: '',
      stationId: id
    }
    try {
      const res: any = await getStationDetail(params)
      this.stationPopData = res.data
    } catch (error) {
      console.error(error)
    }
  }
}
</script>

<style lang="scss" scoped>
.bus-station-map {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  .all-checkbox-list {
    position: absolute; // 定位的基准是中间地图的大盒子
    left: calc(25.7% + 6px);
    top: 20px;
    animation: fadeInLeftList 0.7s linear;
  }
  .map-container-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
  }
}
</style>
